<script setup lang="ts">

import {ref} from "vue";
import {InputInst, useMessage} from "naive-ui";

import {GetTaskStateOK} from "../../wailsjs/go/main/App.js";
import {Bug, Save} from "@vicons/ionicons5";

const emits = defineEmits(['save', 'test'])

const username = defineModel('username')
const passwd = defineModel('passwd')
const loading = ref(false)

const message = useMessage()

const passwdRef = ref<InputInst | null>(null)
const saveBtnRef = ref<InputInst | null>(null)


function onSave() {
  emits('save', username, passwd)
  loading.value = true
  setTimeout(() => {
    loading.value = false

    GetTaskStateOK().then((enabled) => {
          if (!enabled)
            message.info("保存成功，请前往设置界面打开 自动认证")
        }
    )

  }, 500)

}


</script>

<template>
  <n-form>
    <n-form-item-row label="用户名">
      <n-input v-model:value="username" placeholder="请输入用户名"
               :on-keydown="(e)=> {if (e.key =='Enter'){ passwdRef.focus() }}"/>
    </n-form-item-row>

    <n-form-item-row label="密码">
      <n-input show-password-on="click" type="password" ref="passwdRef" v-model:value="passwd" placeholder="请输入密码"
               :on-keydown="(e)=> {if (e.key == 'Enter'){onSave()}}"/>
    </n-form-item-row>
  </n-form>
  <n-button ref="saveBtnRef" type="primary" :disabled="loading" :loading="loading" secondary strong @click="onSave">
    保存
    <template #icon>
      <Save/>
    </template>
  </n-button>

  <n-button strong @click="emits('test', username, passwd)">
    <template #icon>
      <Bug/>
    </template>
    认证测试
  </n-button>

</template>

<style scoped>
</style>
